<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>spring-boot-demo-task-quartz</title>
    <link href="./css/index.css" rel="stylesheet">
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-resource.min.js"></script>
    <script src="./js/index.js"></script>

    <style>
        #top {
            /*background: #20A0FF;*/
            padding: 5px;
            /*overflow: hidden*/
        }
    </style>

</head>
<body>
<div id="job">
    <div id="top">
        <el-button size="small" type="primary" plain @click="search" :loading="loading" icon="el-icon-search">查询
        </el-button>
        <el-button size="small" type="primary" plain @click="handleadd" icon="el-icon-plus">添加</el-button>
        <el-button size="small" type="primary" plain @click="handlePauseAll" icon="el-icon-video-pause">全部暂停</el-button>
        <el-button size="small" type="primary" plain @click="handleStartUp" icon="el-icon-video-pause">开启上架</el-button>
    </div>
    <br/>
    <div>
        <el-table v-loading="listLoading" ref="jobTable" :data="tableData" style="width:100%" border center element-loading-text="Loading"
                  @selection-change="handleSelectionChange">
            <!--<el-table-column prop="jobClassName" type="selection" label="选择" show-overflow-tooltip align="center"></el-table-column>-->
            <!--<el-table-column prop="jobName" label="任务名称" show-overflow-tooltip align="center"></el-table-column>-->
            <el-table-column prop="openStatus" label="基础配置" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="description" label="任务描述" show-overflow-tooltip align="left"></el-table-column>
            <el-table-column prop="jobGroup" label="任务所在组" sortable align="center"></el-table-column>
            <el-table-column prop="jobClassName" label="任务类名" align="center"></el-table-column>
            <!--<el-table-column prop="triggerName" label="触发器名称" align="center"></el-table-column>-->
            <!--<el-table-column prop="triggerGroup" label="触发器所在组" sortable align="center"></el-table-column>-->
            <el-table-column prop="cronExpression" label="表达式" align="center"></el-table-column>
            <el-table-column prop="timeZoneId" label="时区" align="center"></el-table-column>
            <el-table-column prop="triggerState" label="状态" align="center" :formatter="formatState"></el-table-column>
            <el-table-column label="操作" width="300" align="left">
                <template scope="scope">
                    <div align="left">
                        <el-button size="small" type="warning" @click="handlePause(scope.$index, scope.row)">
                            暂停
                        </el-button>
                        <el-button size="small" type="info" @click="handleResume(scope.$index, scope.row)">
                            恢复
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">
                            修改
                        </el-button>
                    </div>
                    <div align="left">
                        <el-button size="small" type="primary" @click="handleUpdateDesc(scope.$index, scope.row)">
                            描述
                        </el-button>
                    </div>

                </template>
            </el-table-column>
        </el-table>

        <div align="center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40,200]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </div>

    <el-dialog title="添加任务" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="任务名称" label-width="100px" style="width:90%">
                <el-input v-model="form.jobName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="任务分组" label-width="100px" style="width:90%">
                <el-input v-model="form.jobGroup" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="表达式" label-width="100px" style="width:90%">
                <el-input v-model="form.cronExpression" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改任务" :visible.sync="updateFormVisible">
        <el-form :model="updateform">
            <el-form-item label="表达式" label-width="100px" style="width:90%">
                <el-input v-model="updateform.cronExpression" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改描述" :visible.sync="updateFormDescVisible">
        <el-form :model="updateform">
            <el-form-item label="任务描述" label-width="100px" style="width:90%">
                <el-input v-model="updateform.description" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormDescVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateDesc">确 定</el-button>
        </div>
    </el-dialog>
</div>

<footer align="center">
    <p>&copy; Quartz 定时任务管理</p>
</footer>

<script>
    var vue = new Vue({
        el: "#job",
        data: {
            listLoading:false,
            //表格当前页数据
            tableData: [],
            //请求的URL
            url: 'job',
            //默认每页数据量
            pagesize: 10,
            //当前页码
            currentPage: 1,
            //查询的页码
            start: 1,
            //默认数据总数
            totalCount: 1000,
            //添加对话框默认可见性
            dialogFormVisible: false,
            //修改对话框默认可见性
            updateFormVisible: false,
            updateFormDescVisible: false,
            //提交的表单
            form: {
                jobName: '',
                jobGroup: '',
                cronExpression: ''
            },
            updateform: {
                jobName: '',
                jobGroup: '',
                cronExpression: ''
            },
            loading: false,
            M_checkbox:[]
        },
        methods: {
            // 格式化状态
            formatState: function (row, column, cellValue, index) {
                if (row.triggerState === '10') {
                    return "运行中";
                } else if (row.triggerState === '11') {
                    return "运行中(WT)";
                } else if (row.triggerState === '20') {
                    return "暂停";
                } else {
                    return "未知状态";
                }
            },
            // 从服务器读取数据
            loadData: function (currentPage, pageSize) {
                this.loading = true;
                this.$http.get('job/jobList?' + 'currentPage=' + currentPage + '&pageSize=' + pageSize).then(function (res) {
                    console.log(res);
                    console.log(res.body.data.data);
                    this.tableData = res.body.data.rows;
                    this.totalCount = res.body.data.total;
                    this.loading = false;
                }, function () {
                    console.log('failed');
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.jobClassName = selection.map(item => item.jobClassName)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            // 暂停所有任务
            handlePauseAll: function (index, row) {
                var _this = this.$http;
                this.$confirm('确认要暂停全部任务吗?', "暂停全部", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    //this.$http.delete('job/deleteJob', {
                    _this.put('job/pauseAllJob', {
                    }, {emulateJSON: true}).then(function (res) {
                        this.loadData(this.currentPage, this.pagesize);
                    }, function () {
                        console.log('failed');
                    });
                }).then(() => {
                    //this.msgSuccess("删除成功!");
                    //this.fetchData();
                })

            },
            // 开启上架任务
            handleStartUp: function (index, row) {
                var _this = this.$http;
                this.$confirm('确认要开启"涉及上架所有任务"吗?', "开启上架", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    //this.$message({ showClose: true, message: msg, type: "开启中。。。",duration: 10000 });
                    vue.listLoading=true;
                    //this.$http.delete('job/deleteJob', {
                    _this.put('job/startUp', {
                    }, {emulateJSON: true}).then(function (res) {
                        this.listLoading = false;
                        console.log(res.data.msg);
                        this.loadData(this.currentPage, this.pagesize);
                        ;
                    }, function () {
                        console.log('failed');
                    });
                }).then(() => {
                    //this.msgSuccess("删除成功!");
                    //this.fetchData();
                })

            },
            // 删除任务
            handleDelete: function (index, row) {
                var _this = this.$http;
                this.$confirm('确认要删除任务:" ' + row.description + ' "吗?', "删除", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    //this.$http.delete('job/deleteJob', {
                    _this.put('job/deleteJob', {
                        "jobClassName": row.jobName,
                        "jobGroupName": row.jobGroup
                    }, {emulateJSON: true}).then(function (res) {
                        this.loadData(this.currentPage, this.pagesize);
                    }, function () {
                        console.log('failed');
                    });
                }).then(() => {
                    //this.msgSuccess("删除成功!");
                    //this.fetchData();
                })

            },
            // 暂停任务
            handlePause: function (index, row) {
                this.$http.put('job/pauseJob', {
                    "jobClassName": row.jobName,
                    "jobGroupName": row.jobGroup
                }, {emulateJSON: true}).then(function (res) {
                    console.log(res);
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });


            },
            // 恢复任务
            handleResume: function (index, row) {
                this.$http.put('job/resumeJob', {
                    "jobClassName": row.jobName,
                    "jobGroupName": row.jobGroup
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                }, function () {
                    console.log('failed');
                });
            },
            // 搜索
            search: function () {
                this.loadData(this.currentPage, this.pagesize);
            },
            // 弹出对话框
            handleadd: function () {
                this.dialogFormVisible = true;
            },
            // 添加
            add: function () {
                this.$http.put('job/addJob', {
                    "jobClassName": this.form.jobName,
                    "jobGroupName": this.form.jobGroup,
                    "cronExpression": this.form.cronExpression
                }, {emulateJSON: true}).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                    this.dialogFormVisible = false;
                }, function () {
                    console.log('failed');
                });
            },
            // 更新
            handleUpdate: function (index, row) {
                console.log(row);
                this.updateFormVisible = true;
                this.updateform.jobName = row.jobName;
                this.updateform.jobGroup = row.jobGroup;
            },
            // 更新
            handleUpdateDesc: function (index, row) {
                console.log(row);
                this.updateFormDescVisible = true;
                this.updateform.jobName = row.jobName;
                this.updateform.jobGroup = row.jobGroup;
            },
            // 更新任务
            update: function () {
                this.$http.put('job/cronJob',
                    {
                        "jobClassName": this.updateform.jobName,
                        "jobGroupName": this.updateform.jobGroup,
                        "cronExpression": this.updateform.cronExpression
                    }, {emulateJSON: true}
                ).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                    this.updateFormVisible = false;
                }, function () {
                    console.log('failed');
                });

            },
            // 更新任务
            updateDesc: function () {
                this.$http.put('job/cronJob',
                    {
                        "jobClassName": this.updateform.jobName,
                        "description": this.updateform.description,
                        "jobGroupName": this.updateform.jobGroup
                    }, {emulateJSON: true}
                ).then(function (res) {
                    this.loadData(this.currentPage, this.pagesize);
                    this.updateFormDescVisible = false;
                }, function () {
                    console.log('failed');
                });

            },
            // 每页显示数据量变更
            handleSizeChange: function (val) {
                this.pagesize = val;
                this.loadData(this.currentPage, this.pagesize);
            },
            // 页码变更
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.loadData(this.currentPage, this.pagesize);
            }
        }
    });

    //载入数据
    vue.loadData(vue.currentPage, vue.pagesize);
</script>

</body>
</html>
